<style lang="scss" scoped>
.page {
  padding: 20px 20px 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>

<template>
  <el-table ref="tableRef" v-bind="attrs" :stripe="attrs.stripe" style="width: 100%">
    <el-table-column v-for="item in columns" :key="item.prop" v-bind="item" >
      <template #header v-if="item.renderHeader">
        <render-header
          :render="item.renderHeader"
        />
      </template>
      <template #default="scope" v-if="item.render">
        <render-cell
          :render="item.render"
          :row="scope.row"
          :column="item"
          :index="scope.$index"
        />
      </template>
    </el-table-column>
  </el-table>
  <div class="page" v-if="hasPage">
    <el-pagination
      background
      layout="total, prev, pager, next, sizes, jumper"
      v-bind="pages"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script>
  export default {
    inheritAttrs: false,
  };
</script>
<script setup>
import { ref } from 'vue'
import RenderCell from './renderCell'
import RenderHeader from './renderHeader'
import { useAttrs, nextTick } from "vue";
const tableRef = ref(null)
const attrs = useAttrs()
const props = defineProps({
  // 表格数据
  tableData: {
    type: Array,
    default: () => [],
  },
  // 表头
  columns: {
    type: Array,
    default: () => [],
  },
  hasPage: {
    type: Boolean,
    default: true
  },
  pages: {
    type: Object,
    default: () => ({
      total: 1000,
      pageSize: 10,
      currentPage: 1
    })
  }
});
const emits = defineEmits(['update:pages', 'page-change'])
// 每页条数变化
const handleSizeChange = (val) => {
  const params = { ...props.pages, pageSize: val, currentPage: 1 }
  emits('update:pages', params)
  nextTick(() => emits('page-change', params))
};
// 页数变化
const handleCurrentChange = (val) => {
  const params = { ...props.pages, currentPage: val }
  emits('update:pages', params)
  nextTick(() => emits('page-change', params))
};

defineExpose({
  getTableRef: () => tableRef.value
})
</script>